<template>
    <div>
        <TrainPage
            ref="TrainPageRef"
            :searchConfig="searchConfig"
            :tableConfig="tableConfig"
            sendUrl="get_bn_moban_list"
            customize
        >
        </TrainPage>
    </div>
</template>

<script>
export default {
    name: 'admin_bn_moban_list',
    data() {
        return {
            searchConfig: [
                {
                    label: '简历模板名称',
                    type: 'input',
                    modelName: 'keywords',
                },
            ],
            tableConfig: {
                isSelection: false,
                maxHeightFlag: false,
                stripe: true,
                filterData: (data) => {
                    return data.map((item) => {
                        let { update_time, create_time,moban_img_url,moban_pdf_url } = item
                        return {
                            ...item,
                            _create_time: this.klDateFormat(create_time),
                            _update_time: this.klDateFormat(update_time),
                            _moban_img_url:[{
                                url:moban_img_url
                            }],
                            _moban_pdf_url:moban_pdf_url?moban_pdf_url.split('/').pop():'',
                        }
                    })
                },
                btns: {
                    children: [
                        {
                            label: '新增',
                            type: 'primary',
                            clickFn: () => {
                                this.$emit('change', {
                                    page: 'edit',
                                    _id: '',
                                })
                            },
                        },
                    ],
                },
                columnObj: [
                    {
                        label: '模板名称',
                        props: 'moban_component_name',
                        width: 200,
                        clickFn: ({ _id = '' }) => {
                            this.$emit('change', {
                                page: 'edit',
                                _id,
                            })
                        },
                    },
                    {
                        label: '模板code',
                        props: 'moban_component_code',
                        width: 200,
                    },
                    {
                        label: '模板示例图',
                        props: '_moban_img_url',
                        width: 200,
                        preview: true,
                        isImage: true,
                        imageWidth: 200,
                        imageHeight: 300,
                    },
                    {
                        label: 'pdf地址',
                        props: '_moban_pdf_url',
                        width: 250,
                        clickFn: ({moban_pdf_url}) => {
                            return this.goTo(this.parseResourceUrl(moban_pdf_url),{
                                target: '_blank'
                            })
                        }, 
                    },
                    {
                        label: 'pdf_remark',
                        props: 'pdf_remark',
                        width: 300,
                    },
                    {
                        label: 'img_remark',
                        props: 'img_remark',
                        width: 300,
                    },
                    {
                        label: 'pdf大小(kb)',
                        props: 'pdf_size',
                        width: 120,
                    },
                    {
                        label: '预览图大小(kb)',
                        props: 'img_size',
                        width: 120,
                        show: () => {
                            return this.isAdmin
                        },
                    },
                    {
                        label: '创建时间',
                        width: 180,
                        props: '_create_time',
                    },
                    {
                        label: '更新时间',
                        width: 180,
                        props: '_update_time',
                    },

                    {
                        label: '操作',
                        slot: 'projectDetail',

                        props: 'action',
                        lock: true,
                        fixed: 'right',
                        children: [
                            {
                                label: '编辑',
                                type: 'success',
                                clickFn: ({ _id = '' }) => {
                                    this.$emit('change', {
                                        page: 'edit',
                                        _id,
                                    })
                                },
                            },
                            {
                                label: '删除',
                                type: 'danger',
                                clickFn: ({ _id } = {}) => {
                                    this.$confirm(
                                        '确认删除该组件吗，这将会导致原来引用这个组件的模板对应组件失效，建议不要删除！！！',
                                    )
                                        .then(async () => {
                                            const res = await this.$apis.del_bn_moban({ _id })
                                            this.$message.success(res.msg)
                                            this.initTable()
                                        })
                                        .catch((err) => {
                                            this.Toast(err)
                                        })
                                },
                            },
                        ],
                    },
                ],
            },

            rowCopy: {},
            visable: false,
        }
    },
    computed: {
        ...Vuex.mapGetters(['jsmindTypes', 'jsmindTypes1']),
        ...Vuex.mapGetters(['getterNavId', 'isAdmin']),
    },
    methods: {
        openDialog(row = {}) {
            this.rowCopy = this.deepCopy(row)
            this.visable = true
        },
    },
}
</script>
